<template>
  <div
    v-if="!show"
    style="
      display: flex;
      flex-direction: column;
      justify-items: center;
      align-items: center;
    "
  >
    <div
      style="
        font-size: 60px;
        font-weight: bold;
        color: #008cba;
        margin: 20px 0 0 20px;
        position: relative;
      "
    >
      学生名单
      <div style=" position: absolute;right: -640px;bottom:-15px">
        <el-dropdown placement="bottom">
          <el-button
            style="
              width: 90px;
              height: 50px;
              font-size: 30px;
              font-weight: 600;
              background-color: #008cba;
              border-color: #008cba;
              color: white;
            "
          >
            菜单
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleClick()" style="font-size: 30px;"
                >班级的成长档案</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>班级</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="i in nameList" :key="i">
          <td style="width: 300px">{{ i.id }}</td>
          <td style="width: 300px">{{ i.name }}</td>
          <td style="width: 300px">{{ i.class }}</td>
          <td style="width: 100px">{{ i.sex }}</td>
          <td style="width: 100px">
            <el-button
              @click="i.name == '章朝源' ? (show = true) : ''"
              size="large"
              type="primary"
              plain
              ><span style="font-size: 25px">查看</span>
            </el-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div v-else class="box">
    <div class="title">
      <span class="a">章朝源个人学习档案</span>
    </div>
    <div class="personInfo">
      <div class="avatar" style="flex-basis: 33%">
        <img src="@/img/xie/personImg.png" width="300px" />
        <div style="font-size: 40px; font-weight: 600">章朝源</div>
        <div>23008020202</div>
        <div>鞋类2302</div>
      </div>

      <div class="chart" style="flex-basis: 33%; height: 500px">
        <ChartShow name="知识基础与认知能力" :option="option1" />
      </div>

      <div style="flex-basis: 33%; height: 500px">
        <span class="title">勋章榜</span>
        <div
          style="
            display: flex;
            justify-content: space-around;
            align-content: start;
            flex-wrap: wrap;
          "
        >
          <div
            v-for="i in medalList"
            :key="i"
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              margin: 0 10px;
            "
          >
            <span
              style="
                height: 30px;
                width: 150px;
                line-height: 30px;
                font-weight: 600;
                font-size: 25px;
                background-color: rgb(129, 66, 158);
                border-radius: 10px;
                margin-bottom: 10px;
                text-align: center;
              "
              >{{ i.name }}</span
            >
            <transition name="fade">
              <img
                ref="medalImg"
                v-if="i.url == require('@/img/medal/8.png')"
                :src="i.url"
                width="150px"
                @click="changeMedal(i)"
              />
              <img v-else :src="i.url" width="150px" />
            </transition>
          </div>
        </div>
      </div>
    </div>
    <div class="charts" style="margin: 30px 0">
      <div class="chart" style="width: 900px">
        <ChartShow name="智能题库学习情况" :option="option2" />
      </div>
      <img src="@/img//xie/personLack.png" width="700px" height="400px" />
      <div class="chart" style="width: 500px">
        <ChartShow name="课堂增值" :option="option3" />
      </div>
      <div class="chart" style="width: 500px">
        <ChartShow name="任务增值" :option="option4" />
      </div>
      <div>
        <span class="title">课外增容</span>
        <img
          style="margin: 10px 0"
          src="@/img//xie/personKeyWords.png"
          width="550px"
          height="300px"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import ChartShow from "@/components/ChartShow.vue";
import router from "@/router";
import { ref } from "vue";

//原先图片的ref
const medalImg = ref(null);

const show = ref(false);

const nameList = ref([
  { id: "23008020201", name: "俞卓娜", class: "鞋类2302", sex: "女" },
  { id: "23008020202", name: "章朝源", class: "鞋类2302", sex: "男" },
  { id: "23008020203", name: "徐越", class: "鞋类2302", sex: "女" },
  { id: "23008020204", name: "徐奕然", class: "鞋类2302", sex: "女" },
  { id: "23008020205", name: "顾铭洲", class: "鞋类2302", sex: "男" },
  { id: "23008020206", name: "王浩翔", class: "鞋类2302", sex: "男" },
  { id: "23008020207", name: "鲁昱彤", class: "鞋类2302", sex: "女" },
  { id: "23008020208", name: "柯雨馨", class: "鞋类2302", sex: "女" },
  { id: "23008020209", name: "蒋陈磊", class: "鞋类2302", sex: "男" },
  { id: "23008020210", name: "廖聊婧", class: "鞋类2302", sex: "女" },
  { id: "23008020211", name: "胡奕帆", class: "鞋类2302", sex: "女" },
  { id: "23008020212", name: "童佳妍", class: "鞋类2302", sex: "女" },
  { id: "23008020213", name: "李安琪", class: "鞋类2302", sex: "女" },
  { id: "23008020214", name: "颜贝贝", class: "鞋类2302", sex: "女" },
  { id: "23008020215", name: "潘晨浩", class: "鞋类2302", sex: "男" },
  { id: "23008020216", name: "蔡艺炫", class: "鞋类2302", sex: "女" },
  { id: "23008020217", name: "缪淑瑶", class: "鞋类2302", sex: "女" },
  { id: "23008020218", name: "叶兴洁", class: "鞋类2302", sex: "女" },
  { id: "23008020219", name: "王杰", class: "鞋类2302", sex: "男" },
  { id: "23008020220", name: "杨乐馨", class: "鞋类2302", sex: "女" },
  { id: "23008020221", name: "李艳芝", class: "鞋类2302", sex: "女" },
  { id: "23008020222", name: "林海若", class: "鞋类2302", sex: "女" },
  { id: "23008020223", name: "蒋涵宸", class: "鞋类2302", sex: "女" },
  { id: "23008020224", name: "郑巨铭", class: "鞋类2302", sex: "男" },
  { id: "23008020225", name: "许栩可", class: "鞋类2302", sex: "女" },
  { id: "23008020226", name: "戴母嘉宇", class: "鞋类2302", sex: "男" },
  { id: "23008020227", name: "郑奎武", class: "鞋类2302", sex: "男" },
  { id: "23008020228", name: "宋欣悦", class: "鞋类2302", sex: "女" },
  { id: "23008020229", name: "蒋伊甜", class: "鞋类2302", sex: "女" },
  { id: "23008020230", name: "傅靖宇", class: "鞋类2302", sex: "男" },
  { id: "23008020231", name: "王君豪", class: "鞋类2302", sex: "男" },
  { id: "23008020232", name: "廖秋琴", class: "鞋类2302", sex: "女" },
  { id: "23008020233", name: "谢炉乐", class: "鞋类2302", sex: "男" },
  { id: "23008020234", name: "陈奂霖", class: "鞋类2302", sex: "男" },
  { id: "23008020235", name: "钟文慧", class: "鞋类2302", sex: "女" },
  { id: "23008020236", name: "徐健峰", class: "鞋类2302", sex: "男" },
  { id: "23008020237", name: "周轩宇", class: "鞋类2302", sex: "男" },
  { id: "23008020238", name: "周玲馨", class: "鞋类2302", sex: "女" },
  { id: "23008020239", name: "朱嘉颖", class: "鞋类2302", sex: "女" },
  { id: "23008020240", name: "谢忠睿", class: "鞋类2302", sex: "男" },
]);

const medalList = ref([
  {
    name: "学习达人",
    url: require("@/img/medal/01.png"),
  },
  {
    name: "技能达人",
    url: require("@/img/medal/02.png"),
  },
  {
    name: "进步达人",
    url: require("@/img/medal/03.png"),
  },
  {
    name: "数字思维",
    url: require("@/img/medal/06.png"),
  },
  {
    name: "团队协作",
    url: require("@/img/medal/07.png"),
  },
  {
    name: "创新发展",
    url: require("@/img/medal/8.png"),
  },
]);

const changeMedal = (i) => {
  if (i.url == require("@/img/medal/8.png")) {
    i.url = require("@/img/medal/08.png");
  }

  document.documentElement.style.setProperty(
    "--elementPosition-top",
    medalImg.value[0].getBoundingClientRect().top + "px"
  );
  document.documentElement.style.setProperty(
    "--elementPosition-left",
    medalImg.value[0].getBoundingClientRect().left + "px"
  );
};

const option1 = {
  // title: {
  //     text: '知识基础与认知能力',
  //     textStyle: {
  //         color: 'white'
  //     }
  // },
  tooltip: {},
  // legend: {
  //     data: [
  //         { name: '系列1', icon: 'circle' },
  //         { name: '系列2', icon: 'circle' },
  //     ],
  //     bottom: 7,
  //     textStyle: {
  //         fontWeight: "bold",
  //         color: 'white'
  //     },
  // },
  radar: {
    indicator: [
      { name: "AI基础知识", max: 5, min: 3 },
      { name: "AI应用能力", max: 5, min: 3 },
      { name: "信息意识", max: 5, min: 3 },
      { name: "计算思维", max: 5, min: 3 },
      { name: "融合创新", max: 5, min: 3 },
    ],
  },
  series: [
    {
      type: "radar",
      data: [
        {
          value: [4.5, 4.3, 4.6, 4.5, 4.3],
          name: "系列1",
          lineStyle: {
            color: "#03ede6",
          },
          itemStyle: {
            color: "#03ede6",
          },
        },
        {
          value: [4.2, 3.7, 4.4, 4.4, 4],
          name: "系列2",
          lineStyle: {
            color: "#f00",
          },
          itemStyle: {
            color: "#f00",
          },
        },
      ],
    },
  ],
};

const option2 = {
  // title: {
  //     text: '智能题库学习情况',
  //     textStyle: {
  //         color: 'white'
  //     }
  // },
  tooltip: {},
  legend: {
    data: [
      "答题数（易）",
      "答题数（中）",
      "答题数（难）",
      "在线答题时长（min）",
      "准确率",
    ],
    textStyle: {
      color: "white",
    },
    bottom: 10,
  },
  xAxis: {
    data: ["任务1", "任务2", "任务3.1", "任务3.2", "任务3.3", "任务3.4"],
    axisLabel: {
      color: "white",
    },
  },
  yAxis: [
    {
      min: 0,
      max: 42,
      axisLabel: {
        textStyle: {
          fontSize: "15",
          color: "white",
        },
      },
      position: "left",
      interval: 7,
    },
    {
      min: 70,
      max: 100,
      axisLabel: {
        textStyle: {
          fontSize: "15",
          color: "white",
        },
        formatter: "{value}%",
      },
      position: "right",
      interval: 5,
    },
  ],
  series: [
    {
      name: "答题数（易）",
      type: "bar",
      data: [5, 10, 6, 10, 12, 10],
      yAxisIndex: 0,
      stack: "x",
    },
    {
      name: "答题数（中）",
      type: "bar",
      data: [10, 9, 18, 16, 15, 16],
      yAxisIndex: 0,
      stack: "x",
    },
    {
      name: "答题数（难）",
      type: "bar",
      data: [5, 1, 6, 4, 3, 4],
      yAxisIndex: 0,
      stack: "x",
    },
    {
      name: "在线答题时长（min）",
      type: "line",
      data: [10, 17, 24, 22, 23, 20],
    },
    {
      name: "准确率",
      type: "line",
      data: [80, 80, 85, 85, 90, 95],
      yAxisIndex: 1,
      formatter: "{value}%",
    },
  ],
};
const option3 = {
  // title: {
  //     text: '课堂增值',
  //     textStyle: {
  //         color: 'white'
  //     }
  // },
  legend: {
    data: ["前测", "后测"],
    textStyle: {
      color: "white",
    },
  },
  xAxis: {
    data: ["任务1", "任务2", "任务3.1", "任务3.2", "任务3.3", "任务3.4"],
    axisLabel: {
      textStyle: {
        fontSize: "15",
        color: "white",
      },
    },
  },
  yAxis: {
    min: 60,
    max: 95,
    axisLabel: {
      textStyle: {
        fontSize: "15",
        color: "white",
      },
    },
    splitNumber: (95 - 60) / 5, // 设置 y 轴分段数，默认值是 3
  },
  series: [
    {
      name: "前测",
      type: "bar",
      data: [73, 76, 78, 80, 82, 83],
    },
    {
      name: "后测",
      type: "bar",
      data: [74, 80, 88, 90, 92, 0],
    },
  ],
};
const option4 = {
  // title: {
  //     text: '课堂表现',
  //     textStyle: {
  //         color: 'white'
  //     }
  // },
  xAxis: {
    data: ["任务1", "任务2", "任务3.1", "任务3.2", "任务3.3", "任务3.4"],
    axisLabel: {
      textStyle: {
        fontSize: "15",
        color: "white",
      },
    },
  },
  yAxis: {
    min: 60,
    max: 95,
    axisLabel: {
      textStyle: {
        fontSize: "15",
        color: "white",
      },
    },
    splitNumber: (95 - 60) / 5, // 设置 y 轴分段数，默认值是 3
  },
  series: [
    {
      type: "line",
      data: [75, 78, 88, 89, 90],
      lineStyle: {
        color: "#03ede6",
      },
      itemStyle: {
        color: "#03ede6",
      },
    },
  ],
};

// 修改handleClick函数，使用localStorage存储数据
const handleClick = () => {
  // 从nameList中提取所有学生名字创建一个新数组
  const studentNames = nameList.value.map((student) => student.name);
  // 存储到localStorage，而不是通过URL传递
  localStorage.setItem("studentNames", JSON.stringify(studentNames));
  // 简单的路由跳转，不携带数据
  router.push("/growArchive");
};
</script>

<style lang="scss" scoped>
// :root{
// --elementPosition-top:0;
// --elementPosition-left:0
// }

table {
  border-collapse: collapse;
  color: white;
  font-size: 30px;
  margin-bottom: 20px;
}

tbody > tr:nth-child(2n-1) {
  background-color: #0c2635;
}

th,
td {
  border: 1px solid #a5deff;
  padding: 8px;
  text-align: center;
}

.name:hover {
  transform: scale(1.1);
  transition: all 0.3s ease;
  box-shadow: 0 0 5px #000000;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  color: white;

  .personInfo {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .avatar {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      div {
        font-size: 30px;
        font-weight: 500;
        width: 100%;
        text-align: center;
      }
    }
  }

  .chart {
    width: 600px;
    height: 400px;
    margin: 10px;

    div {
      background-color: #324374;
      box-shadow: 0 0 10px rgb(34, 31, 38);
    }
  }

  .charts {
    display: flex;
    justify-content: space-around;
    align-content: start;
    flex-wrap: wrap;
  }
}

.title {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  background-color: rgb(129, 66, 158);
  border-radius: 10px;
  margin: 10px auto;
  padding: 10px;

  .a {
    font-weight: 600;
    font-size: 45px;
  }
}

.fade-enter-active {
  // transition: all 0.9s ease-in;
  animation: bounce-in 3s;
  z-index: 999;
}

.fade-leave-active {
  transition: all 3s ease;
}

// .fade-enter-from {
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: scale(3);
//     transform-origin: center center;
//     // transform: translateX(50px);
// }

// .fade-enter-to {
//     opacity: 1;
// }

@keyframes bounce-in {
  0% {
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: scale(4);
    opacity: 0;
  }

  30% {
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: scale(4.5);
    opacity: 1;
  }

  100% {
    position: fixed;
    top: var(--elementPosition-top);
    left: var(--elementPosition-left);
    transform: scale(1);
  }
}

.fade-leave-from {
  // opacity: 1;
  position: fixed;
  top: var(--elementPosition-top);
  left: var(--elementPosition-left);
}

.fade-leave-to {
  // opacity: 0;
  // transform: scale(0.1);
  position: fixed;
  top: var(--elementPosition-top);
  left: var(--elementPosition-left);
}
</style>